<template>
	<view>
		<view class="p-20px pb-120px">
			<uv-sticky offset-top="10">
				<uv-subsection :list="state.tabs" :current="state.current" @change="change"
					custom-style="height: 60rpx;border-radius: 30rpx;" custom-item-style="border-radius: 30rpx;">
				</uv-subsection>
			</uv-sticky>

			<view class="mt-20px">
				<uv-search placeholder="请输入手机号搜索" v-model="state.search" :showAction="false"></uv-search>
			</view>

			<view v-if="state.cardList && state.cardList.length">
				<BigCountNum title='已打款佣金(元)' :count='10960' isExtra>
					<view>
						<view>未打款佣金(元)</view>
						<view class="text-60px mt-20px">0</view>
					</view>
				</BigCountNum>

				<ColorfulCard v-model="state.cardList" v-slot="slotProps">
					<view class="content">
						<view class="mt-10px pl-40px flex">
							<uv-avatar :src="slotProps.data.recommendSrc" :size="60"></uv-avatar>
							<view class="ml-20px">
								<text>{{slotProps.data.recommendName}} 一级红包</text>
								<view>佣金金额 <text class="color-blue text-60px">{{slotProps.data.recommendMoney}}</text>
								</view>
							</view>
						</view>
						<uv-line margin="20rpx 0"></uv-line>
						<uv-form labelPosition="left" ref="form">
							<uv-cell title='打款用户姓名' :value="slotProps.data.content.userName"></uv-cell>
							<uv-cell title='打款用户电话' :value="slotProps.data.content.phone"></uv-cell>
							<uv-cell title='订单编号' :value="slotProps.data.content.orderNo"></uv-cell>
							<uv-cell title='打款时间' :value="slotProps.data.content.time"></uv-cell>
						</uv-form>
					</view>
				</ColorfulCard>
			</view>

			<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
		</view>
		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="Commission">
	import {
		reactive,
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import BigCountNum from '@/components/BigCountNum.vue'
	import ColorfulCard from '@/components/ColorfulCard.vue'

	const state = reactive({
		tabs: [],
		// 或者如下，也可以配置keyName参数修改对象键名
		// tabs: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
		current: 0,
		pageType: 0,
		search: '',
		cardList: [{
				id: 0,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '肖诗雨',
				recommendName: '小倩倩我爱你',
				recommendSrc: 'https://i.postimg.cc/Z50x276H/d52a2834349b033ba548be43225f9fded739bd82.jpg',
				recommendMoney: '50.00',
				content: {
					userName: '大吴老师',
					phone: '13736033914',
					orderNo: 'N20240303425338742',
					time: '2024-03-11 03-11',
				},
				tags: [{
					text: '队长',
					type: 'danger'
				}],
			},
			{
				id: 1,
				src: 'https://via.placeholder.com/200x200.png/2878ff',
				name: '王劲松',
				recommendName: '小菜不吃香菜',
				recommendSrc: 'https://i.postimg.cc/KY8jJwLc/dbb44aed2e738bd4ce8bcf01076121db267ff954.jpg',
				recommendMoney: '230.00',
				tags: [{
					text: '队长',
					type: 'danger'
				}],
				content: {
					userName: '大吴老师',
					phone: '13736033914',
					orderNo: 'N20240303425338742',
					time: '2024-03-11 03-11',
				},
			},
			{
				id: 2,
				src: 'https://cdn.uviewui.com/uview/album/3.jpg',
				name: '王萌萌',
				recommendName: '王总在包厢',
				recommendSrc: 'https://i.postimg.cc/02NSyVcw/0824ab18972bd407218c6573df63385c0db309e8.jpg',
				recommendMoney: '293.05',
				tags: [{
					text: '队员',
					type: 'danger'
				}],
				content: {
					userName: '大吴老师',
					phone: '13736033914',
					orderNo: 'N20240303425338742',
					time: '2024-03-11 03-11',
				},
			},
		]
	})

	const change = (index) => {
		state.current = index
		if (state.pageType == 0) {
			if (state.current == 0) {
				console.log('切换 调用佣金数据 已打款 接口');
			} else if (state.current == 1) {
				console.log('切换 调用佣金数据 未打款 接口');
			}
		}

		if (state.pageType == 1) {
			if (state.current == 0) {
				console.log('切换 调用溯源佣金记录 已打款 接口');
			} else if (state.current == 1) {
				console.log('切换 调用溯源佣金记录 未打款 接口');
			}
		}

		if (state.pageType == 2) {
			if (state.current == 0) {
				console.log('切换 佣金审核 全部 接口');
			} else if (state.current == 1) {
				console.log('切换 佣金审核 待审核 接口');
				state.cardList = []
			} else if (state.current == 2) {
				console.log('切换 佣金审核 已审核 接口');
			} else if (state.current == 3) {
				console.log('切换 佣金审核 已拒绝 接口');
			}
		}

	}

	const setTitle = () => {
		if (state.pageType == 0) {
			state.tabs = ['已打款', '未打款']
			uni.setNavigationBarTitle({
				title: '佣金数据'
			});
			console.log('onmount 调用佣金数据 已打款 接口');
		} else if (state.pageType == 1) {
			state.tabs = ['已打款', '未打款']
			uni.setNavigationBarTitle({
				title: '溯源佣金记录'
			});
			console.log('onmount 调用溯源佣金记录 已打款 接口');
		} else if (state.pageType == 2) {
			state.tabs = ['全部', '待审核', '已审核', '已拒绝']
			uni.setNavigationBarTitle({
				title: '佣金审核记录'
			});
			console.log('onmount 佣金审核 全部 接口');
		}

	}

	onLoad((option) => {
		state.pageType = option.pageType
		console.log(888, state);
		setTitle()
	})
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}

	:deep(.uv-cell__body) {
		padding: 10rpx 0 !important;
	}
</style>